<template>
    <div>
        <Section title="房屋设施" moreText="查看全部设施">
            <div class="facility-inner" v-if="houseFacility">
                <template v-for="(item, index) in houseFacility.houseFacilitys" :key="index">
                    <div class="item" v-if="houseFacility.facilitySort.includes(index)">
                        <div class="head">
                            <img :src="item.icon" alt="">
                            <div class="text">{{ item.groupName }}</div>
                        </div>
                        <div class="list">
                            <template v-for="(facility, facilityIndex) in item.facilitys.slice(0, 4)" :key="facilityIndex">
                                <div class="facility">
                                    <i class="icon_check icon"></i>
                                    <span>{{ facility.name }}</span>
                                </div>
                            </template>
                        </div>
                    </div>
                </template>
            </div>
        </Section>
    </div>
</template>

<script setup>
import Section from '@/components/detail/section.vue'
import useDeatilStore from '@/stores/modules/detail'
import { storeToRefs } from 'pinia'
import { computed } from 'vue'


const detailStore = useDeatilStore()
const { mainPart } = storeToRefs(detailStore)
const houseFacility = computed(() => mainPart.value.dynamicModule?.facilityModule.houseFacility)
</script>

<style lang="less" scoped>
.facility-inner {
  padding: 5px 0;
  border-radius: 6px;
  font-size: 12px;
  background-color: #f7f9fb;

  .item {
    display: flex;
    margin: 25px 0;

    .head {
      width: 90px;
      text-align: center;

      img {
        width: 20px;
        height: 20px;
      }

      .text {
        margin-top: 5px;
        color: #000;
      }
    }

    .list {
      flex: 1;
      display: flex;
      flex-wrap: wrap;
      align-items: center;

      .facility {
        display: flex;
        align-items: center;
        box-sizing: border-box;
        width: 50%;
        margin: 4px 0;

        .icon {
          margin: 0 6px;
        }

        .text {
          color: #333;
        }
      }
    }
  }
}
</style>